<style scoped>
  .fade-enter-active {
    animation: fade-in .5s;
  }

  .fade-leave-active {
    animation: fade-out .5s;
  }

  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
</style>
<template>
  <transition name="fade">
    <div class="checkListBg" @click.self="close">
      <div class="checkList">
        <div class="checkListHead">
          <span>{{checkListTitle}}</span>
          <a href="javascript:void(0);" @click.stop="close">关闭</a>
        </div>
        <transition name="slide">
          <div class="checkListBody">
            <slot>
              <!--<p>
              <label>
                <input type="radio">
                <span>选项二</span>
              </label>
            </p>-->
            </slot>
          </div>
        </transition>
      </div>
    </div>
  </transition>
</template>
<script>
  import "../assets/css/check_list.scss";
  export default {
    props: ['checkListTitle'],
    methods: {
      close(){
        this.$emit('close');
      }
    }
  }
</script>
